<template>
	<view class="content">
		<!-- 登录窗口 -->
		<u-modal :showConfirmButton="false" :showCancelButton="false" class="mymodal" :show="show"
			@close="loginwindowclose" ref="uModal" :asyncClose="true" :closeOnClickOverlay="true">
			<u--form :rules="rules" :model="model1" labelPosition="left" ref="form1">

				<u-form-item prop="userInfo.username" label="用户名" borderBottom ref="item1">
					<u--input border="none" type="text" placeholder="请输入用户名" v-model="model1.userInfo.username">
					</u--input>
				</u-form-item>

				<u-form-item prop="userInfo.pwd" label="密码" borderBottom ref="item2">
					<u--input border="none" type="password" placeholder="请输入密码" v-model="model1.userInfo.pwd">
					</u--input>
				</u-form-item>
			</u--form>

			<u-button type="error" style="margin-top: 30rpx" shape="circle" text="登录/注册" @tap="login"></u-button>
		</u-modal>

		<!-- 退出的询问窗口 -->
		<u-modal :show="logoutWindowShow" title="登出账号确认" content='您是否想要退出当前账号？' :showConfirmButton="true"
			:showCancelButton="true" @confirm="logoutWindowConfirm" @cancel="logoutWindowShow = false"
			@close="logoutWindowShow = false" :closeOnClickOverlay="true"></u-modal>


		<!-- 用户信息 -->
		<view class="cd-userinfo-area" v-if="isLogin">
			<view class="cd-userinfo-avatar">
				<u--image width="72" height="72" :src="userInfo.avatar" shape="circle"></u--image>
			</view>

			<view class="cd-userinfo-username">{{ userInfo.username }}</view>

			<view class="cd-userinfo-logout">
				<!-- 退出 -->
				<u-icon @tap="logout" name="close" color="white" size="14"></u-icon>
			</view>
		</view>
		<view class="cd-userinfo-area" v-else>
			<view class="cd-userinfo-avatar">
				<u--image width="72" height="72" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle">
				</u--image>
			</view>

			<view class="cd-userinfo-username" @tap="show = true">点击登录</view>

			<view class="cd-userinfo-logout">
				<!-- 右箭头 -->
				<u-icon @tap="show = true" name="arrow-right" color="white" size="14"></u-icon>
			</view>
		</view>

		<view class="cd-user-grid">
			<u-grid :border="true" @click="click">
				<u-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex" bgColor="white">
					<u-icon class="grid-myicon" :customStyle="{ paddingTop: 20 + 'rpx' }" :name="baseListItem.icon"
						:size="28"></u-icon>
					<text class="grid-text">{{ baseListItem.title }}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>

		<customTabBar></customTabBar>
	</view>
</template>

<script>
	import customTabBar from '@/custom-tab-bar/index.vue';
	import { mapMutations } from "vuex";
	import {
		ApiLogin
	} from '@/utils/api.js';
	import {
		isLogin
	} from '@/utils/units.js';

	export default {
		components: {
			customTabBar
		},
		data() {
			return {
				isLogin: false,

				// 显示退出对话框
				logoutWindowShow: false,

				// 显示登录框
				show: false,

				// 宫格信息
				baseList: [{
						title: '我的订单',
						icon: 'order'
					},
					{
						title: '优惠券',
						icon: 'coupon'
					},
					{
						title: '礼品卡',
						icon: 'bag'
					},
					{
						title: '我的收藏',
						icon: 'map'
					},
					{
						title: '我的足迹',
						icon: 'car'
					},
					{
						title: '会员福利',
						icon: 'account'
					},
					{
						title: '地址管理',
						icon: 'calendar'
					},
					{
						title: '账号安全',
						icon: 'warning'
					},
					{
						title: '联系客服',
						icon: 'kefu-ermai'
					},
					{
						title: '帮助中心',
						icon: 'question-circle'
					},
					{
						title: '意见反馈',
						icon: 'share-square'
					}
				],
				// 用户信息
				userInfo: {},

				// 表单信息
				model1: {
					userInfo: {
						username: '',
						pwd: ''
					}
				},
				// 表单的规则
				rules: {
					'userInfo.username': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					},
					'userInfo.pwd': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					}
				}
			};
		},
		onShow() {
			this.$store.commit('changeTabbarIndex', 4);
			this.isLogin = isLogin();
			this.userInfo = uni.getStorageSync('userInfo');
		},
		methods: {
			...mapMutations(['setToken']),
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`);
			},
			// 登录方法
			async login() {
				let form1 = this.$refs.form1;

				form1.validate().then(async (res1) => {
					uni.$u.toast('校验通过')
					let res = await ApiLogin(this.model1.userInfo.username, this.model1.userInfo.pwd);

					// 登录失败的时候
					if (res.errno !== 0) {
						uni.showToast({
							title: res.errmsg,
							icon: "error"
						});
						// 表单信息
						this.model1.userInfo = {
							username: '',
							pwd: ''
						};
						return;
					}


					let {
						userInfo,
						token
					} = res.data;
					// 保存到vuex
					this.setToken(token);

					// 保存数据缓存
					uni.setStorageSync('token', token);
					this.userInfo = userInfo;

					uni.setStorageSync('token', token);
					uni.setStorageSync('userInfo', userInfo);
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});
					this.isLogin = true;
					// 登录成功后，将登录弹窗隐藏
					this.show = false;

				}).catch(errors => {
					console.log(errors);
					uni.$u.toast('校验失败')
				})
			},
			// 退出
			logout() {
				this.logoutWindowShow = true;
			},
			// 退出登录的对话框
			logoutWindowConfirm() {
				this.isLogin = false;
				this.show = false;
				this.logoutWindowShow = false;
				uni.removeStorageSync('token');
				uni.removeStorageSync('userInfo');
			},
			loginwindowclose() {
				this.show = false;
			}
		}
	};
</script>

<style lang="scss">
	// 用户登录（用户信息）
	.cd-userinfo-area {
		height: 220rpx;
		background-color: #333333;
		display: flex;

		.cd-userinfo-avatar {
			flex: 1;
			max-width: 182rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.cd-userinfo-username {
			flex: 1;
			display: flex;
			// justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: white;
		}

		.cd-userinfo-logout {
			flex: 1;
			max-width: 68rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	}

	page {
		background-color: #efefef;
	}

	// 宫格
	.u-grid-item {
		// background-color: white !important;
		height: 250rpx;

		.grid-text {
			font-size: 24rpx;
			color: #909399;
			padding: 10rpx 0 20rpx 0rpx;
			/* #ifndef APP-PLUS */
			box-sizing: border-box;
			/* #endif */
		}
	}

	// 弹出框
	// .u-modal {
	// 	.u-modal__content {
	// 		padding: 12px 0px 25px 0px !important;
	// 		.u-form-item__body {
	// 		}
	// 		.u-form-item__body__left {
	// 			width: 150rpx;
	// 		}
	// 	}
	// }

	.cd-user-grid {
		padding-bottom: 120rpx;
	}
</style>
